<template>
  <div class="outside">
    <Tabs class="tabs" v-model:active="currentPage" >
      <Tab title="添加评价" title-style="font-size: 17px" />
      <Tab title="添加学生评价" title-style="font-size: 17px" />
    </Tabs>

    <div v-show="currentPage === 0">
      <Field class="title" placeholder="输入评价名称"
             v-model="newTitle"
             rows="2"
             autosize
             label="题目"
             type="textarea"
             maxlength="50"
             show-word-limit />

      <Button class="button" @click="addTitleEvent">提交</Button>
    </div>

    <div v-show="currentPage === 1">
      <Field class="description" placeholder="输入评价内容"
             v-model="newDescription"
             rows="4"
             autosize
             label="内容"
             type="textarea"
             maxlength="100"
             show-word-limit />

      <div class="students">
        <DropdownMenu active-color="#9caf70">
          <DropdownItem  v-model="currentStuIndex" :options="studentOptions" title-class="titleClass"/>
        </DropdownMenu>
      </div>

      <div class="evaluations">
        <DropdownMenu active-color="#9caf70">
          <DropdownItem  v-model="currentEvaIndex" :options="evaluationOptions" title-class="titleClass"/>
        </DropdownMenu>
      </div>

      <Button class="button" @click="addStuEvaEvent">提交</Button>
    </div>

  </div>
</template>

<script setup >
import {Button, DropdownItem, DropdownMenu, Field, Tab, Tabs, Toast} from "vant";
import {ref, watch} from "vue";
import {getStuNames, getEvaNames, addStuInfo, addTitle} from "@/v-api/add/addEvaluation";

//选择添加
const currentPage = ref(0) //0是添加评价，1是添加学生评价

//------添加评价-------
const newTitle = ref('')
const addTitleEvent = () =>{
  // console.log(newTitle.value)
  addTitle(newTitle.value)
  Toast.success({
    message: "提交成功",
    position: "bottom"
  })

  //提交后置空表单
  newTitle.value = '';
}

//------添加学生评价------

//Description
const newDescription = ref('');

//学生名字DropDown
const stuInfo = ref([])
const currentStuIndex = ref(0);
const studentOptions = ref([])

//评价名称DropDown
const evaInfo = ref([])
const currentEvaIndex = ref(0);
const evaluationOptions = ref([])

//前后端数据交互
/**
 * 获取学生名字填充dropdown
 * @returns {Promise<void>}
 */
const getStu = async () =>{
  stuInfo.value = ( await getStuNames() ).data
  // console.log(stuInfo.value)
  studentOptions.value = stuInfo.value.map((item,index) =>{
    return {
      text: item.studentName,
      value: index
    }
  })
}
getStu();

/**
 * 获取评价名称填充dropdown
 * @returns {Promise<void>}
 */
const getEva = async () =>{
  evaInfo.value = ( await  getEvaNames() ).data
  // console.log(evaInfo.value)
  evaluationOptions.value = evaInfo.value.map((item,index) =>{
    return {
      text: item.title,
      value: index
    }
  })
}
getEva();

/**
 * 增加学生评价记录
 */
const addStuEvaEvent = () =>{
  const studentId = stuInfo.value[currentStuIndex.value].studentId;
  const description = newDescription.value
  const evaluationId = evaInfo.value[currentEvaIndex.value].id;
  // console.log(studentId)
  // console.log(description)
  // console.log(evaluationId)
  addStuInfo(studentId,description,evaluationId);
  Toast.success({
    message: "提交成功",
    position: "bottom"
  })

  //提交后置空表单
  newDescription.value = '';
  currentStuIndex.value = 0;
  currentEvaIndex.value = 0;
}

watch(() => [currentPage.value], () =>{
  getStu();
  getEva();
})

</script>

<style scoped>
.outside{
  margin: 15px;
}

.tabs{
  margin-bottom: 20px;
}
.tabs :deep(.van-tabs__line){
  background-color: #9caf70;
}

.title{
  background-color: #f8f8f8;
  height: 90px;
  border-radius: 10px;
}

.description{
  background-color: #f8f8f8;
  height: 140px;
  border-radius: 10px;
}

.students,
.evaluations{
  margin-top:15px;
  border-radius: 10px;
  :deep(.van-dropdown-menu__bar){
    box-shadow: unset !important;
    background-color: #f8f8f8 !important;
    height: 38px !important;
    border-radius: 10px;
  }
  :deep(.titleClass){
    color: grey !important;
  }
}

.evaluations{
  :deep(.van-dropdown-item__content .van-cell__title){
    flex:2 !important;
  }
}

.button{
  margin-top: 20px;
  width: 100%;
  color: white;
  font-weight: bold;
  font-size: 16px;
  font-family: 幼圆;
  background-image: linear-gradient(#b9d28a,#9caf70);/* #adc280,#9caf70 */
  border-radius: 20px;
}
</style>

